<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小咪快跑</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <div class="copy-toast" id="copyToast">复制成功</div>
    <header>
        <div class="profile-container">
            <div class="profile-info">
                <h1>小咪快跑</h1>
                <div class="social-links">
                    <div class="social-item">
                        <a href="#" title="微信">
                            <i class="fab fa-weixin"></i> WeChat: laozhiwugame
                        </a>
                        <button class="copy-btn" data-copy="laozhiwugame">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                    <div class="social-item">
                        <a href="#" title="QQ">
                            <i class="fab fa-qq"></i> QQ: 3925802423
                        </a>
                        <button class="copy-btn" data-copy="3925802423">
                            <i class="far fa-copy"></i>
                        </button>
                    </div>
                </div>
            </div>
            <div class="game-count">
                <span>游戏总数：<strong id="totalGames">0</strong></span>
            </div>
        </div>
    </header>

    <nav class="game-nav">
        <div class="game-categories">
            <!-- 导航栏将由JavaScript动态生成 -->
        </div>
    </nav>

    <main>
        <div class="games-container">
            <!-- 游戏卡片将由JavaScript动态生成 -->
        </div>
    </main>

    <footer>
        <p>&copy; 2024 我的网页. 保留所有权利。</p>
    </footer>

    <!-- 添加模态框 -->
    <div class="game-modal">
        <div class="modal-overlay"></div>
        <div class="modal-content">
            <div class="modal-close"><i class="fas fa-times"></i></div>
            <div class="preview-wrapper">
                <div class="phone-frame">
                    <div class="phone-screen">
                        <iframe id="gameFrame" src="" frameborder="0"></iframe>
                    </div>
                </div>
                <div class="qr-code">
                    <div id="qrContainer"></div>
                    <p>扫码开始游戏</p>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
    <script src="script.js"></script>
</body>
</html>